<!--  -->
<template>
  <div id="app_Menulist">
 <!-- -----------------------------------------头部--------------------------------------- -->   
  <div class="app_Menulist_head">
      <section class="app_Menulist_head_content">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
        <el-button>添加</el-button>
      </section>
    </div>
 <!-- -------------------------------------------底部--------------------------------------------- -->
   <div class="app_Menulist_bottom">
      <div class="app_Menulist_bottom_content">
        <el-table :data="tableData" border style="width: 100%">
          <!-- 1 -->
          <el-table-column prop="date" label="编号" width="180" align="center">
          </el-table-column>
          <!-- 2 -->
          <el-table-column prop="menu" label="菜单名称" align="center">
          </el-table-column>
          <!-- 3 -->
          <el-table-column prop="num" label="菜单级数" align="center">
          </el-table-column>
          <!-- 4 -->
          <el-table-column prop="name" label="前端名称" align="center">
          </el-table-column>
          <!-- 5 -->
          <el-table-column prop="img" label="前端图标" align="center">
            <i class="el-icon-s-claim"></i>
          </el-table-column>
          <!-- 6 -->
          <el-table-column prop="yeson" label="是否显示" align="center">
            <el-switch v-model="value">
              
            </el-switch>
          </el-table-column>
          <!-- 7 -->
          <el-table-column prop="sorting" label="排序" align="center">
            
          </el-table-column>
          <!-- 8 -->
          <el-table-column prop="set" label="设置" align="center">
            <div>
              <span><a href="">查看下级</a></span>
            </div>
          </el-table-column>
          <!-- 9 -->
          <el-table-column prop="operation" label="操作" align="center">
            <div>
              <span>
                <el-button type="text" @click="open"><a href="javascript:void(0);">编辑</a></el-button>
                <el-button type="text" @click="updete"><a href="javascript:void(0);">删除</a></el-button>
                </span>
            </div>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- ------------------------------------底部分页器------------------------------ -->
    <div class="app_Menulist_bottom_foot">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="30">
      </el-pagination>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      tableData: [
        {
          date: "1",
          menu: "权限",
          num: "二级",
          name: "pms",
          img: "2020-02-03 16:50:37",
          yesno: "2020-02-03 14:55:55",
          sorting: "0",
          set:"",
          operation:"",
        },
      ],
      input: "",
      value: true,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /* 删除 */
    updete() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      /* 编辑 */
      open() {
        this.$alert('<textarea rows="8" cols="40" style="margin-left:40px"></textarea>', '编辑 :', {
          dangerouslyUseHTMLString: true
        });
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
/* ----------------------------头部 ------------------------------*/
.app_Menulist_head {
  border: 1px solid #ebeef5;
  color: #303133;
  margin: 20px;
  .app_Menulist_head_content {
     padding: 20px;
    i.el-icon-tickets {

    }
    span {
          margin-right: 1000px;
          margin-left: 10px;
          font-size: 16px;
        }
    el-button {

    }
  }
}
/* -------------------------底部 --------------------------------------*/
.app_Menulist_bottom {
  margin: 20px;
  .app_Menulist_bottom_content {
    div {
      span {
        a {
          text-decoration: none;
          color: #409eff;
          font-size: 12px;
          margin-right: 5px;
        }
      }
    }
  }
}
/* -------------------------底部分页器------------------------------------ */
.app_Menulist_bottom_foot{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
